<template>
  <view>
   <view class="search-box">
     <uni-search-bar @input="input" placeholder="请输入搜素内容" :radius="100" cancelButton="none" :focus=true></uni-search-bar>
   </view>
   
   <view v-if="searchList.length!=0">
    <view v-for="(item,index) in searchList" class="searchitem" >
      <text>{{item.goods_name}}</text>
      <uni-icons type="right"></uni-icons>
    </view> 
   </view>

   <view class="history" v-else>
     <view class="historyh">
       <text>搜索历史</text>
       <uni-icons type="trash-filled" size="30" @click="deltag"></uni-icons>
     </view>
     <view class="historytag">
     <uni-tag :text="item" v-for="(item,index) in hislist" :key="index" inverted @click="gotogoodList(item)"></uni-tag>
     </view>
   </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        inputval:'',
        timer:null,
        searchList:[],
        tagList:['a','b','c']
        
      };
    },
    onLoad(){
   this.tagList=JSON.parse( uni.getStorageSync('kw')||'[]')
 
    },
    computed:{
      hislist(){
        return [...this.tagList].reverse()
      }
    },
    methods:{
     
      input(e){
        this.timer=null
    this.timer=  setTimeout( ()=>{
        this.inputval=e
        if(e){
         this.inputval=e
         this.getSearchList()
        }else{
          this.searchList=[]
        }
        
      },500)
      },
   async   getSearchList(){
 const result=    await uni.$http.reqsearchList(this.inputval)
 this.searchList=result.data.message
     this.savetagList()
      },
      savetagList(){
        let set=new Set(this.tagList)
        set.delete(this.inputval)
        set.add(this.inputval)
    this.tagList=Array.from(set)
    uni.setStorageSync('kw',JSON.stringify(this.tagList))
    
      },
      deltag(){
        this.tagList=[],
        uni.clearStorageSync('kw')
      },
      gotogoodList(item){
        uni.navigateTo({
          url:'../goods_list/goods_list?query='+item
        })
      }
    }
  }
</script>

<style lang="scss">
.search-box{
  background-color: #c00000;
  position: sticky;
  top:0;
  z-index: 999;
}
.searchitem{
  display: flex;
  justify-content: center;
  
  font-size: 12px;
  padding: 10px 10px;
  text{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-right: 3px;
  }
}
.history{
  padding:  10px;
}
.historyh{
  display: flex;
  justify-content:space-between;
  align-items: center;
}
.historytag{
  padding: 10px 0;
  .uni-tag{
    margin-right: 10px;
  }
}
</style>
